<template>
	<view class="admin-edit-device-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="pollution-wrap">

				<view class="content">
					<view class="c">
						<view class="name">二维码编号：</view>
						<view class="val">{{deviceDetail.devicecode}}</view>
					</view>
					<view class="c">
						<view class="name">设施名称：</view>
						<view class="val">{{deviceDetail.devicename}}</view>
					</view>
					<view class="c">
						<view class="name">涉废类型：</view>
						<view class="val">{{adviceTypeList.find((item)=>item.value ==deviceDetail.devicetype)?.text}}
						</view>
					</view>
					<view class="c">
						<view class="name">设施状态：</view>
						<view class="val">{{deviceDetail.status==1?'正常':'停用'}}</view>
					</view>
					<view class="c">
						<view class="name">安装位置：</view>
						<view class="val">{{deviceDetail.installposition}}</view>
					</view>
					<view class="c">
						<view class="name">处理设计风量(m³/h)：</view>
						<view class="val">{{deviceDetail.designairvolume }}</view>
					</view>
					<view class="c">
						<view class="name">设计使用量(kg)：</view>
						<view class="val">{{deviceDetail.designusenum }}</view>
					</view>
					<view class="c">
						<view class="name">更换周期：</view>
						<view class="val">{{deviceDetail.recircledays}}天</view>
					</view>
				<!-- 	<view class="c">
						<view class="name">环保管理员1：</view>
						<view class="val">{{deviceDetail.hbperson}}</view>
					</view>
					<view class="c">
						<view class="name">手机号：</view>
						<view class="val">{{deviceDetail.hbmobile}}</view>
					</view>
					<view class="c">
						<view class="name">环保管理员2：</view>
						<view class="val">{{deviceDetail.hbpersonsecond}}</view>
					</view>
					<view class="c">
						<view class="name">手机号：</view>
						<view class="val">{{deviceDetail.hbmobilesecond}}</view>
					</view> -->
					<view class="btn">
						<button>保存二维码到本地</button>
					</view>
					<view class="qrcode">
						<image :src="deviceDetail.qrcodeurl" mode=""></image>
						<view class="code">编号：{{deviceDetail.devicecode}}</view>
					</view>
					<!-- <view class="text">
						郑州市生态环境局制
					</view> -->
					<view class="btn-wrap" @click="editDevice">
						<button>修改设施</button>

					</view>
				</view>

			</view>


		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let agent = ref(1)
	let adviceTypeList = ref([])
	let deviceDetail = ref({})
	let deviceList = ref([])
	let name = "设施详情"
	onLoad((e) => {
		console.log(e,'e');
		agent.value = e.agent || ''
		http({
			url: '/device/detail',
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				deviceDetail.value = res.data
			}
		})
	})
	onShow(() => {

	})
	let editDevice = () => {
		uni.redirectTo({
			url: `/contorllerPageOther/admineditdevicedetailpage/admineditdevicedetailpage?msg=${JSON.stringify(deviceDetail.value)}&agent=${agent.value}`
		})
	}
	let jumpDetail = () => {

	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	.admin-edit-device-detail {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			height: calc(100vh - 160rpx);
			width: 100vw;
			background-color: #F0F2F5;
			overflow: auto;

			.btn-wrap {
				margin-top: 40rpx;

				margin-bottom: 40rpx;

				button {
					width: 672rpx;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					background: #0874FA;



					color: #FFFFFF;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}



			.pollution-wrap {
				.content {
					background-color: #fff;
					padding: 30rpx 50rpx 52rpx 50rpx;

					.text {

						font-weight: 500;
						font-size: 21rpx;
						color: #333333;
						text-align: center;
						margin-top: 18rpx;
					}

					.qrcode {

						width: 291rpx;
						height: 329rpx;
						border: 1px solid #313131;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin: 0 auto;

						image {
							width: 200rpx;
							height: 200rpx;
						}

						.code {
							margin-top: 10rpx;
							font-weight: 500;
							font-size: 21rpx;
							color: #333333;

						}
					}

					.btn {
						margin-top: 70rpx;
						margin-bottom: 30rpx;

						button {

							font-weight: 400;
							font-size: 23rpx;
							color: #FFFFFF;
							width: 274rpx;
							height: 43rpx;
							background: #047AE1;
							border-radius: 7rpx;
							line-height: 43rpx;
							margin: 0 auto;
						}
					}

					.c:first-child {
						margin-top: 0rpx !important;
					}

					.c {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;

						.name {

							font-weight: 400;
							font-size: 31rpx;
							color: #333333;

						}

						.val {

							font-weight: 400;
							font-size: 33rpx;
							color: #333333;

						}
					}
				}

				.title {
					width: 750rpx;
					height: 108rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 35rpx;
					color: #333333;
					padding-left: 50rpx;

					.line {
						width: 8rpx;
						height: 25rpx;
						background: #0874FA;
						border-radius: 4rpx;
						margin-right: 15rpx;
					}
				}
			}
		}

	}
</style>